<template>
    <aside class="site-sidebar">
        <div class="site-sidebar__inner">
            <el-menu mode="horizontal" active-text-color="#ffd04b" background-color="#545c64"
                class="el-menu-vertical-demo" default-active="1" text-color="#fff" @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="1" @click="$router.push({ path: '/' })">
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><icon-menu /></el-icon>
                        <span>DL模型</span>
                    </template>
                    <el-menu-item index="2-1" @click="$router.push({ path: '/a1a2' })">
                        <span>A1A2</span>
                    </el-menu-item>
                    <el-menu-item index="2-2" @click="$router.push({ path: '/a1a3' })">
                        <span>发博文</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>工具Utils</span>
                    </template>
                    <el-menu-item index="3-1" @click="$router.push({ path: '/about' })">
                        <span>about</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="4">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>待开发</span>
                1    {{ userStore.getlogin()}}1
                </el-menu-item>
                <el-menu-item index="5" class="right-menu-item" v-if="userStore.getlogin()"
                    style="float: right;position: absolute;right: 100px;">
                    <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                        <div class="avatar-wrapper">
                            <img :src="imageTarget + userStore.user.value.avatar" class="user-avatar">
                            <i class="el-icon-caret-bottom" />
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu slot="dropdown">
                                <router-link to="/user/profile">
                                    <el-dropdown-item>个人中心</el-dropdown-item>
                                </router-link>
                                <el-dropdown-item>
                                    <span>布局设置</span>
                                </el-dropdown-item>
                                <el-dropdown-item divided @click.native="handleLogout">
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-menu-item>
                <el-menu-item index="6" style="float: right;position: absolute;right: 100px;" v-else>
                    <el-link @click.native="dialogFormVisible = true">登录</el-link>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <el-link>注册</el-link>
                </el-menu-item>
            </el-menu>
        </div>
    </aside>

    <el-dialog v-model="dialogFormVisible" title="登录窗口" width="500">
        <el-form :model="loginForm">
            <el-form-item label="用户名：" label-width="140px">
                <el-input v-model="loginForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密 码：" label-width="140px">
                <el-input v-model="loginForm.password" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 40px"
                    @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                </el-input>
                <div class="login-code">
                    <el-image :src="codeUrl" @click="getCode" draggable="false">
                        <template #placeholder>
                            <el-icon>
                                <!-- <Picture /> -->
                            </el-icon>
                        </template>
                        <template #error>
                            #error
                        </template>
                    </el-image>

                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>&nbsp;&nbsp;&nbsp;
                <el-button type="primary" @click="handleLogin">
                    登录
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { request } from '../utils/request'
import { useUserStoreHook } from '../stores/user'
import { setToken } from '../utils/cookies'
// 可以在组件中的任意位置访问 `store` 变量 
const userStore = useUserStoreHook()
const imageTarget = ref("http://localhost:8080")
const dialogFormVisible = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}
const avatar = ref('/src/assets/profile.jpg')

const logindialog = ref(false)

const loginForm = reactive({
    username: 'admin',
    password: 'admin123',
    code: '',
    uuid: ''
})
const codeUrl = ref('')

const getCode = () => {
    // 先清空验证码的输入
    loginForm.code = ""
    // 获取验证码
    codeUrl.value = ""

    request({
        url: "api/captchaImage",
        method: "get"
    }).then(res => {
        codeUrl.value = "data:image/gif;base64," + res.img;
        loginForm.uuid = res.uuid;
    }
    );
}
const handleLogin = () => {
    request({
        url: "api/login",
        method: "post",
        data: loginForm
    }).then(res => {
        setToken(res.token)

        userStore.getInfo()
        loginForm.uuid = res.uuid;
        dialogFormVisible.value = false
    }
    );
}

const handleLogout = () => {

    userStore.logout()
}



/** 初始化验证码 */
getCode()

</script>

<style scoped>
.user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.site-sidebar {
    height: 60px;
    position: fixed;
    top: 0px;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width: 100%;
    overflow: hidden;
    background-color: #545c64;
}

.site-sidebar__inner {

    padding-bottom: 15px;
    overflow-y: scroll;
}
</style>